<script setup lang="ts">
import { computed } from 'vue'
import { storageLocal } from '@pureadmin/utils'

import type { IChefAndCollect } from './compute'

const props = withDefaults(
  defineProps<{
    spots?: Record<string, IChefAndCollect[]>
    name: string
  }>(),
  {
    spots: () => ({}),
  },
)

const storageSpots: Record<string, IChefAndCollect[]> = storageLocal().getItem(props.name) ?? {}

const tableData = computed(() => {
  const spots = Object.keys(props.spots).length ? props.spots : storageSpots
  const result: {
    name: string
    group: IChefAndCollect[]
  }[] = []

  storageLocal().setItem(props.name, spots)

  Object.keys(spots).forEach((name) => {
    const group = spots[name]
    if (group.length) {
      result.push({ name, group })
    }
  })

  return result
})
</script>

<template>
  <n-table :single-line="false" v-if="tableData.length">
    <tbody>
      <template v-for="spot in tableData" :key="spot.name">
        <tr v-if="spot.group.length">
          <th style="text-align: center">{{ spot.name }}</th>
          <td v-for="{ chef } in spot.group" :key="chef.chefId">
            {{ chef.name }}
            <span :style="[chef.rarity > 3 && 'color:#FFD700']">{{ '★'.repeat(chef.rarity) }}</span>
          </td>
        </tr>
      </template>
    </tbody>
  </n-table>
</template>
